<!-- 2020 Sora https://www.sorasky.in/ -->

<template>
  <div id="login_window" class="login_window">
    <div class="container">
      <div class="content">
        <h2 class="text-center" style="padding-top: 50px;">心理问题筛查管理平台</h2>
        <hr />
        <h4 class="text-center">注册</h4>
        <hr style="background-color: black; width: 100px;" />
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">用户名：</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入用户名" v-model="username"/>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">姓名：</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入姓名" v-model="stu_name"/>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">密码：</span>
            </div>
            <input type="password" class="form-control" placeholder="请输入密码" v-model="password"/>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">重复密码：</span>
            </div>
            <input type="password" class="form-control" placeholder="请再次输入密码" v-model="password2"/>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">学号：</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入学号" v-model="student_id"/>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">性别：</span>
            </div>
            <select class="form-control el-select" v-model="gender" id="gender">
              <option disabled value="">请选择性别</option>
              <option value="male">男</option>
              <option value="female">女</option>
              <option value="secret">保密</option>
            </select>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">年级：</span>
            </div>
            <select class="form-control el-select" v-model="grade" id="grade">
              <option disabled value="">选择年级</option>
              <option value="male">本科生2020级</option>
              <option value="female">本科生2019级</option>
              <option value="secret">本科生2018级</option>
              <option value="male">本科生2017级</option>
              <option value="female">研究生2020级</option>
              <option value="secret">研究生2019级</option>
              <option value="secret">研究生2018级</option>
            </select>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">班级：</span>
            </div>
            <input type="text" placeholder="请输入班级" class="form-control" v-model="class_"/>
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">民族：</span>
            </div>
            <input type="text" placeholder="请输入民族" class="form-control" v-model="nationality"/>
          </div>
          <input type="button" class="btn btn-primary btn-block" value="注册" @click="register" />
        </form>
        <div class="text-center m-4">
          <p>已经有账号？去<router-link to="login">登录</router-link> | <a href="#">找回密码</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../assets/css/login.css'
import $ from "jquery";
import element from "element-ui";
export default {
  name: 'Register',
  components: {

  },
  methods: {
    register(){
      if(!this.gender) alert('请选择性别！')
      if(!this.grade) alert('请选择年级！')
      else
        $.ajax({
          contentType: 'application/json',
          type: 'POST',
          url: '/register',
          dataType: 'json',
          data: JSON.stringify({
            'username': this.stu_name,
            'account': this.username,
            'userpassword': this.password,
            'Stu_ID': this.student_id,
            'sex': this.gender,
            'custom': this.nationality,
            'Grade': this.grade,
            'Class': this.class_
          }),
          success: res => {
            if(res.flag){
              element.Message({
                message: '注册成功，正在跳转',
                type: 'success'
              })
              this.$router.push('/login?reg_success')
            }else{
              element.Message({
                message: '用户名已经有人用啦，请换个用户名吧！',
                type: 'error'
              })
            }
          },
          error: res => {
            element.Message({
              message: '内部错误，请联系管理员',
              type: 'error'
            })
          }
        })
    },
    send_code(){

    }
  },
  data(){
    return {
      username: '',
      password: '',
      password2: '',
      student_id: '',
      gender: '',
      grade: '',
      class_: '',
      nationality: '',
      stu_name: '',
    }
  }
}
</script>

<style>
</style>
